import React, { Component } from "react";
/**
  1.创建一个状态库--redux-story
  2.在组件中使用getState()获取仓库的状态值
  3.修改：在组件中使用dispatch（action）派发一个动作到reducer里去，我们在reducer里处理值，然后返回
  4.修改后重新获取值：subscirbe（）订阅，获取修改后的值：【当reducer里的状态产生了变化，那么subscribe就会被触发
  生僻的单词：
  story:商店
  dispatch：派发
  reducer：仓库管理员  /瑞丢色
  subscribe：订阅
 */
import story from "./story";
export default class index extends Component {
  constructor() {
    super();
    // 1.获取story中的状态值
    this.state = story.getState();
    // 4.订阅--subscribe(()=>{}),该方法只接受一个函数
    story.subscribe(() => {
      // 重新获取值
      const newState = story.getState();
      // 这句判断相当于优化
      if (newState.name !== this.state.name) {
        this.setState(newState);
      }
      console.log("reducer的发生了更新");
    });
  }
  // 修改story值
  handleChange = () => {
    // 2.修改值---派发一个动作，动作是我们要修改的内容
    const action = {
      type: "setName",
      value: "阿含"
    };
    // 派发-->dispatch,动作-->action
    story.dispatch(action);
  };
  render() {
    console.log("触发了");
    const { name, theme } = this.state;
    return (
      <div>
        <h2 style={{ color: theme }}>下午学习：如何修改状态库</h2>
        <h2 style={{ color: theme }}>欢迎您！{name}</h2>
        <button style={{ color: theme }} onClick={this.handleChange}>
          修改名字
        </button>
      </div>
    );
  }
}
